<template>
  <a-card>
    <div v-if="doneList && doneList.length > 0">
      <a-collapse expandIconPosition="right" v-for="(item,index) in doneList" :key="index" v-model="activeKey">
        <a-collapse-panel :key="String(index + 1)" :header="item.materialName">
          <a-form-model layout="inline">
            <a-row :gutter="48" style="width: 100%; display: flex;align-items: center;">
              <a-col
                @click.stop="() => {}" :xl="6":sm="6" :md="6" :lg="6" :xs="24" >
                <a-form-model-item label="创建时间:">
                  {{ item.createtime }}
                </a-form-model-item>
              </a-col>
              <a-col
                @click.stop="() => {}" :xl="14" :sm="14" :md="14" :lg="14" :xs="24">
                <a-form-model-item label="送达文件:">
                  <div v-for="(material, materialIndex) in item.materialList" :key="materialIndex" class="arrive_file">
                    <span @click="fileView(material)" v-if="material.file && material.file.filename"> {{ (material.file && material.file.filename) || '' }}</span>
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
            <div v-for="(person, personKey) in item.personList" :key="personKey">
              <a-row :gutter="48" style="width: 100%; display: flex;align-items: center;">
                <ArrivePerson :ref="person.id" :key="person.id" :recordid="item.id" :personInfo="person" :isEdit="false" @deletePerson="() => {}"></ArrivePerson>
              </a-row>
            </div>
          </a-form-model>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <a-empty v-else description="暂无送达信息" style="min-height: 400px" />

  </a-card>
</template>

  <script>
  import { kkfilePreview } from '@/utils/util.js'

  export default {
    data () {
      return {
        doneList: [],
        activeKey: ['1'],
        selectItem: {},
        address: []
      }
    },
    created () {
      this.doneList = this.$store.state.arrive.doneList
      if (this.doneList) {
      this.doneList.forEach(done => {
        const fileItemSet = new Set()
        if (done.materialList) {
          done.materialList.forEach(material => {
            fileItemSet.add(material.matttype_text)
          })
        }
        const fileItem = [...fileItemSet]
        done.materialName = fileItem.join('，')
      })
    }
    },
    components: {
      ArrivePerson: () => import('@/views/arrive/ArrivePerson.vue')
    },
    methods: {
      fileView (material) {
        window.open(kkfilePreview(material.file.path))
      }

    }
  }
  </script>

  <style lang="scss" scoped>

    ::v-deep .ant-collapse {
      background: #ffffff;
      margin-top: 20px;
    }
    :v-deep .ant-collapse > .ant-collapse-item > .ant-collapse-header {
      font-size: 16px;
    }
    ::v-deep .ant-collapse-header {
      font-size: 16px;
      font-weight: bold;
      background: #F8F8F8;
      color: #2C2C2C !important;
    }
    ::v-deep .ant-collapse-content > .ant-collapse-content-box {
      padding: 32px;
    }
    .arrive_file {
      display: inline-block;
      margin: 0px 10px;
      cursor: pointer;
      color: #0072C6
    }

    .arrive_circle_red {
      display: inline-block;
      background: #CA0000;
      border-radius: 50%;
      width: 8px;
      height: 8px;
    }
    .arrive_label_red {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #CA0000;
      margin-left: 10px;
      margin-right: 30px;
    }

    .arrive_circle_orange {
      display: inline-block;
      background: #FFA200;
      border-radius: 50%;
      width: 8px;
      height: 8px;
    }
    .arrive_label_orange {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #FFA200;
      margin-left: 10px;
      margin-right: 30px;
    }
    .arrive_circle_green {
      display: inline-block;
      background: #00AE08;
      border-radius: 50%;
      width: 8px;
      height: 8px;
    }
    .arrive_label_green  {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #00AE08;
      margin-left: 10px;
      margin-right: 30px;
    }
  </style>
